<template>
<app-main>
  <div class="wrapper">
    <page-title class="title" title='MY ACCOUNT' subtitle='PROFILE'
                :style='{background: "url(" + titleBackImg + ")"}'/>
    <div class="main-content">
      <el-row :gutter="32">
        <el-col :span="6">
          <el-menu class="menu" text-color="#999999" :default-active="defaultActive" active-text-color="#333333">
            <el-menu-item v-for="item in menuData" :key="item.index" :index="item.index" @click="change(item)">
              <template slot="title">
                <i :class="item.icon"/>
                <span>{{item.name}}</span>
              </template>
            </el-menu-item>

            <el-menu-item :router="false" @click="logout" :disabled="loading">
              <template slot="title">
              <i class="el-icon-switch-button"/>
              <span>Logout</span>
              </template>
            </el-menu-item>

          </el-menu>
        </el-col>
        <el-col :span="18">
          <router-view />
        </el-col>
      </el-row>
    </div>
  </div>
</app-main>
</template>

<script>
import AppMainWrapper from '@/components/wrapper/AppMainWrapper'
import PageTitle from '@/views/part/index/PageTitle'
import titleImg from '@img/page-titlebg.png'
import { mapMutations } from 'vuex'
import constants from '@store/user/constants'

export default {
  name: 'AppAccount',
  components: {
    'app-main': AppMainWrapper,
    'page-title': PageTitle
  },
  data () {
    return {
      loading: false,
      titleBackImg: titleImg,
      menu: '',
      menuData: [{
        name: 'Order',
        index: '/account/order',
        icon: 'el-icon-edit'
      }, {
        name: 'Download',
        index: '/account/download',
        icon: 'el-icon-download'
      }, {
        name: 'Address',
        index: '/account/address',
        icon: 'el-icon-location'
      }, {
        name: 'Detail',
        index: '/account/detail',
        icon: 'el-icon-user-solid'
      }]
    }
  },
  computed: {
    defaultActive () {
      let item
      for (let i = 0; i < this.menuData.length; i++) {
        item = this.menuData[i]
        if (item.name.toLowerCase() === this.menu.toLowerCase()) {
          return item.index
        }
      }
      return 'order'
    }
  },
  methods: {
    ...mapMutations('user', [constants.MUTATIONS_SET_LOGIN_USER_INFO]),
    change (item) {
      this.$router.push(item.index)
    },
    logout () {
      this.$confirm('确定退出吗？退出后需要密码进行再次登录', '提示', {
        type: 'warning'
      }).then(_ => {
        const vm = this
        vm.loading = true
        setTimeout(() => {
          vm.$message.success('账号登出成功')
          this[constants.MUTATIONS_SET_LOGIN_USER_INFO](null)
          vm.$router.push('/login')
          vm.loading = false
        }, 2000)
      })
    }
  },
  watch: {
    '$route.path': function (newVal) {
      this.menu = newVal.substr(newVal.lastIndexOf('/') + 1)
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrapper{
    padding-top: 18px;

    .title{
      width: 100%;
      height: 180px;
      user-select: none;
      padding: 54px 220px;
      letter-spacing: -1px;
    }

    .main-content{
      max-width: 1310px;
      width: 100%;
      margin: 40px auto;

      .menu{
        padding: 40px 50px;
        background: #fcfcfc;
        text-align: left;

        span{
          font-size: 16px;
          font-weight: 700;
        }

        i{
          font-size: 24px;
          margin-right: 18px;
        }

      }

    }
  }
</style>
